<!-- 筛选组件 -->
<template>
	<!-- 防止穿透 -->
	<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> -->
	
	<!-- 弹出层 -->
	<uni-popup ref="popup" type="bottom" @close="setShow2(false)" @maskClick="setShow2(false)">
		<!-- 具体内容 -->
		<view class="screenPop">
			<view class="screenPop-center">
				<view class="item" v-for="(res,index) in pageData">
					<!-- 标题 -->
					<view class="item-title">
						<text>{{res.title}}</text>
					</view>

					<!-- 内容 -->
					<view class="item-content">
						<view class="item-content-button" v-if="listType(res.title)">

							<view :class="{
								'childItem':true,
							}" v-for="res2 in res.data" :style="{width: (100 / res.data.length)+'%'}">

								<!-- 男女选项 -->
								<view :class="{
									'childItem2':res2.status
								}" @click="switchItem(res2)">
									<uni-icons custom-prefix="iconfont2" :type="res2.icon" size="28rpx"
										:color="res2.status ? '#ec606f': '#666'"></uni-icons>
									<text class="childItem-text">{{res2.name}}</text>
								</view>
							</view>

						</view>


						<!-- 这是滑动条 -->
						<view class="item-content-slider" v-if="!listType(res.title)">
							<MySlider :title="res.title" :valueInit="res.data" :sectionData="res.sectionData" @submit="sliderSubmit" :update="upDate" @setUpDate="setUpDate"></MySlider>
						</view>
						
					</view>
				</view>
			</view>




			<!-- 按钮 -->
			<view class="button">
				<view class="button-item" @click="restorePageData">
					重置
				</view>
				<view class="button-item button-item-submit" @click="submitPageData">
					确定
				</view>
			</view>


		</view>

	</uni-popup>
</template>

<script>
	// 组件
	import MySlider from './slider.vue'




	/**
	 * 页面初始值
	 */
	let pageDataInit = [{
			title: '性别',
			data: [{
					name: '女友伴',
					icon: 'icon-nv',
					status: true
				},
				{
					name: '男友伴',
					icon: 'icon-nan',
					status: false
				},
			]
		},

		{
			title: '年龄',
			data: [18, 40],
			sectionData: [18, 40],
		},
		{
			title: '身高',
			data: [150, 180],
			sectionData: [150, 180],
		},
		// {
		// 	title: '等级',
		// 	data: [
		// 		{
		// 			name: '全部',
		// 			status: true
		// 		},
		// 		{
		// 			name: '模特',
		// 			status: false
					
		// 		},
		// 		{
		// 			name: '艺人',
		// 			status: false
		// 		},
		// 	]
		// }
	]



	export default {
		components: {
			MySlider
		},
		props: {
			/**
			 * 是否显示
			 */
			show: {
				type: Boolean,
				default: false
			},

			/**
			 * 更改是否显示
			 */
			setShow: {
				type: Function,
				default: () => {}
			},

			/**
			 * 筛选取值
			 */
			submit: {
				type: Function,
				default: () => {}
			}


		},

		data() {
			return {
				pageData: [], // 页面数据
				upDate: false, // 是否重置组件
			};
		},
		computed:{
			
			/**
			 * 判断是否显示选项，false就是显示滑动条
			 */
			listType(){
				return (val)=>{
					let type = false
					
					if(val === '性别' || val === '等级'){
						type = true
					}else{
						type = false
					}
					
					return type
				}
			}
		},
		created() {
			this.pageData = JSON.parse(JSON.stringify(pageDataInit))
		},
		watch: {
			show() {
				if (this.show) {
					this.$refs.popup.open()
				} else {
					this.$refs.popup.close()
				}
			}
		},
		methods: {
			/**
			 * 修改是否重置
			 */
			setUpDate(){
				this.upDate = false
			},
			
			/**
			 * 修改滑动条的值
			 */
			sliderSubmit(val){
				this.pageData.forEach((res,index) =>{
					if(res.title === val.title){
						res.data = JSON.parse(JSON.stringify(val.value))
					}
				})
			},
			
			/**
			 * 筛选弹出的显隐
			 */
			setShow2(val) {
				this.$emit('setShow', val)
			},

			/**
			 * 切换选中项
			 */
			switchItem(val) {
				
				this.pageData.map(res => {
					if (res.title === '性别' || res.title === '等级') {
						res.data.map(res2 => {
							if (res2.name === val.name) {
								res2.status = true
							}else{
								res2.status = false
								
							}
							return res2
						})
					}
				})

			},

			/**
			 * 重置
			 */
			restorePageData() {
				this.pageData = JSON.parse(JSON.stringify(pageDataInit))
				this.upDate = true
			},


			/**
			 * 提交
			 */
			submitPageData() {
								
				let submitData = [] // 提交的数据
				this.pageData.forEach((res, index) => {


					// 子数据
					let childData = []
					

					res.data.forEach((res2, index2) => {
						if (res2.status) {
							childData.push(res2.name)
						}
						
						if(res2.status === undefined){
							childData.push(res2)
						}
					})

					submitData.push({
						title: res.title,
						data: childData
					})
				})
				
				
				this.$emit('submit', submitData)

			},

		}
	}
</script>

<style lang="less" scoped>
	.screenPop {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		box-sizing: border-box;		
		#padding(24rpx 24rpx 136rpx 24rpx);

		.screenPop-center {
			.item {
				#box(100%, 200rpx);
				#padding(24rpx 0);

				&:not(:last-child) {
					border-bottom: 1px solid rgba(#000, .05);
				}

				.item-title {
					#font(28rpx, #999);
				}

				.item-content {
					height: 100%;

					.item-content-button {
						height: 100%;
						#flex(-, center, center);

						.childItem {
							#flex(-, center, center);

							&:first-child {}

							.childItem-text {
								margin-left: 12rpx;
								#font(28rpx, #666);
							}
						}

						.childItem2 {
							border: 2rpx solid #ec606f;
							#padding(12rpx 24rpx);
							border-radius: 100rpx;

							.childItem-text {
								color: #ec606f;
							}
						}
					}


					.item-content-slider {
						height: 100%;
						#padding(0 100rpx);
						#flex(-,center,center);
					}
				}

			}
		}



		.button {
			#flex(-, center, center);
			margin-top: 24rpx;

			.button-item {
				#box(300rpx, 80rpx, 40rpx, #efefef);
				#flex(-, center, center);
				#font(28rpx, #666);
			}

			.button-item-submit {
				margin-left: 24rpx;
				background-color: #ec606f;
				color: #fff;

			}
		}
	}
</style>